<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="ISO-8859-1">
    <title>用户管理</title>
    <link href="/lib/layui-v2.6.3/css/layui.css" rel="stylesheet">

</head>
<body>
<div style="margin: 10px 0px 0px 10px">
    <div class="layui-inline">
        <label class="layui-form-label">用户名称</label>
        <div class="layui-input-inline">
            <input id="input1" type="text" class="layui-input">
        </div>
        <input id="searchBtn" type="button" value="搜索" class="layui-btn">
        <input id="addBtn" type="button" value="添加用户" class="layui-btn">
    </div>
</div>

<table id="userTable" lay-filter="table1"></table>

<script type="text/html" id=operateTemplate>

    <input type="button" class="layui-btn layui-btn-xs" value="编辑" lay-event="edit">
    <input type="button" class="layui-btn layui-btn-xs layui-btn-danger" value="删除" lay-event="del">
</script>
<script id="userTemplate" type="text/html">
    <form class="layui-form" lay-filter="userForm">
        <div class="layui-form-item">

            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="hidden" name="userId"/>
                <input type="hidden" name="action" value="save"/>
                <input type="text" name="userName" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="userPassword" autocomplete="off" placeholder="请输入密码"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="saveBtn" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</script>

<script src="/lib/layui-v2.6.3/layui.js"></script>
<script type="text/javascript">

    layui.use(["table", "layer", "laydate", "form"], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var form = layui.form;

        $("#addBtn").on("click", function () {
            layer.open({
                type: 1,
                area: ["400px", "320px"],
                title: "新增用户",
                content: $("#userTemplate").html()
            });
        });


        $("body").on("click", "#saveBtn", function () {
            var data = form.val("userForm");
            console.log(data);
            if(data.userName==null||data.userName==""){
                layer.msg("用户名不能为空");
                return false;
            };
            $.post("/user", data, function (result) {
                if(result.code==0){
                    layer.closeAll();
                    layer.msg(result.msg);
                    $("#searchBtn").click();
                }else{
                    layer.msg(result.msg);
                }

            });
        });

        $("#searchBtn").on("click", function () {

            table.render({
                elem: "#userTable",
                url: "/user",
                where: {keyword: $("#input1").val(), action: "list"},
                cols: [[{
                    title: "ID",
                    field: "userId"
                }, {
                    title: "用户名",
                    field: "userName"
                }, {
                    title: "密码",
                    field: "userPassword"
                },
                    {title: '操作', toolbar: '#operateTemplate', align: "center"}
                ]],
                page: true,
                limit:5,
                limits: [5, 10, 15, 20]
            });
        });
        //用代码点了一下搜索
        $("#searchBtn").click();


        table.on("tool(table1)", function (obj) {
            if (obj.event == "edit") {
                $.get("/user?action=sel&&id=" + obj.data.userId, function (m) {
                    console.log(m);
                    if (m.code == 0) {


                            layer.open({
                                type: 1,
                                area: ["400px", "320px"],
                                title: "编辑用户",
                                content: $("#userTemplate").html()
                            });

                            form.val("userForm", m.data);

                    } else {
                        layer.msg(m.msg);
                    }
                });
            }

            if (obj.event == "del") {
                layer.confirm("您确定要删除此商品吗？", function () {
                    $.post("/user", {id: obj.data.userId, action: "delete"}, function () {
                        layer.closeAll();
                        $("#searchBtn").click();
                    });
                });
            }
        })
    });
</script>
</body>
</html>